<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>基本资料</span>
                            <el-button class="button" text>资料修改</el-button>
                        </div>
                    </template>
                    <div class="left-top">
                        <div class="top">
                            <img style="width: 50px;height: 50px;border-radius: 50%;"
                                src="../../../../public/img/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=JPEG.webp"
                                alt="">
                            <p>sdasda</p>
                        </div>
                        <div class="top">
                            <p>积分</p>
                            <p>12312312.00 <span style="color: #409eff;cursor: pointer;"
                                    @click="rechargeData(1)">充值</span></p>
                        </div>
                        <div class="top">
                            <p>余额</p>
                            <p>25931390.00 <span style="color: #409eff;cursor: pointer;"
                                    @click="rechargeData(2)">充值</span>
                            </p>
                        </div>
                    </div>
                    <div style="padding-left: 50px;">
                        <p>手机号码： 13350215562</p>
                        <p>注册时间：2025-04-24 13:47:14</p>
                        <p>状态：正常</p>
                        <p>渠道标志： oW5oX4wRGuKiawkcsx46-QUeulJs</p>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>分销信息</span>
                            <el-button class="button" text>订单列表</el-button>
                        </div>
                    </template>
                    <div class="left-top">
                        <div class="top">
                            <p>分销订单</p>
                            <p>12312312.00</p>
                        </div>
                        <div class="top">
                            <p>可提现</p>
                            <p>25931390.00 <span style="color: #409eff;cursor: pointer;">调整</span></p>
                        </div>
                        <div class="top">
                            <p>已提现</p>
                            <p>25931390.00</p>
                        </div>
                        <div class="top">
                            <p>提现中</p>
                            <p>25931390.00 </p>
                        </div>
                    </div>
                    <div style="padding-left: 50px;">
                        <p>手机号码： 13350215562</p>
                        <p>注册时间：2025-04-24 13:47:14</p>
                        <p>状态：正常</p>
                        <p>渠道标志： oW5oX4wRGuKiawkcsx46-QUeulJs</p>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>收获地址</span>
                        </div>
                    </template>
                    <div>
                        <el-table :data="tableData" style="width: 100%" border max-height="300px">
                            <el-table-column prop="date" label="收货人" />
                            <el-table-column prop="name" label="联系方式" />
                            <el-table-column prop="address" label="地址" />
                            <el-table-column prop="address" label="是否默认" />
                        </el-table>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
    <el-dialog v-model="recharge" :title="title" width="400px" :before-close="handleClose" center>
        <div>
            <el-form :model="formpage">
                <el-form-item label="数量">
                    <el-input v-model="formpage.num" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="formpage.name" placeholder="请输入" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="recharge = false">
                    保存
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
const recharge = ref(false)
const title = ref('')
const formpage = reactive({
    num: 0,
    name: ''
})
const rechargeDataNum = ref(-1)

const tableData = reactive([
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
])
// 关闭弹框
const handleClose = () => {
    recharge.value = false
}
// 点击充值
const rechargeData = (num) => {
    recharge.value = true
    rechargeDataNum.value = num
    if (num == 1) {
        title.value = '积分调整'
    } else {
        title.value = '余额调整'
    }
}


onMounted(() => {

})

</script>

<style lang="scss" scoped>
.left-top {
    padding: 0 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.item {
    margin-bottom: 18px;
}

.box-card {
    width: 100%;
}
</style>